<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作和CSS方法-应用jQuery设置元素及内容</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
        $(function(){
            // alert($('#box').html());//获得html内容 包括标签
            // alert(document.getElementById("box").innerHTML);//用js方法获取html内容

            // $('#box').html('<em>新的内容</em>');//修改html内容 直接在html括号中添加新的内容
            // alert(document.getElementById("box").innerHTML="<em>新的内容</em>");//JS方法修改html的内容

            // alert($('#box').text());//获取文本内容 不包含html标签
            // alert(document.getElementById("box").innerText);//获取文本内容 不包含html标签

            // alert($('strong').eq(0).text());//获得strong的文本内容
            // alert(document.getElementsByTagName("strong")[0].innerText);

            // $('#box').text('我是新的em,你知道吗');//可以不要<em></em>标签 设置box的文本内容

            
            // alert($('input').val()); //获得表单的内容
            // alert(document.getElementsByTagName("input")[0].value);//在js中获得表单的内容
            // $('input').val('修改后的新表单内容');//修改后的表单内容
            // document.getElementsByTagName("input")[0].value="新内容";//在js中修改表单的饿内容

            // $('input').val(['男','小孩']);//设置默认选中项 男 小孩
            document.getElementById("男").checked=true;//设置默认选中项 男
            document.getElementById("小孩").checked=true;//设置默认选中项 小孩

        });
    </script>
</head>
<body>
<script>
    /*本节主要内容
    *#################################################################################################
    * 一.应用jQuery设置元素及内容
    *                       jquery                                 JS
    *
    *  1.获取html内容        $('#box').html()                       document.getElementById("box").innerHTML
    *  2.修改html内容        $('#box').html('<em>新的内容</em>')    document.getElementById("box").innerHTML="文本内容";
    *
    *  3.获取html文本内容    $('#box').text()                       document.getElementById("box").innerText
    *  4.获取strong文本内容  $('strong').eq(0).text()               document.getElementsByTagName("strong")[0].innerText
    *
    *  5.获得表单的内容      $('input').eq(0).val()                 document.getElementsByTagName("input")[0].value
    *  6.修改表单的内容      $('input').val('修改后的新表单内容')    document.getElementsByTagName("input")[0].value="新内容"
    *  7.设置默认选中        $('input').val(['男','小孩'])          document.getElementById("男").checked=true;
    *                                                             document.getElementById("小孩").checked=true;
    *
    * 二.应用jQuery操作元素的属性
    * 三.应用jQuery操作元素的样式
    * 四.jQuery在CSS方法应用
    * */
</script>
    <div id="box">
        <strong>DOM基本操作</strong>
        <strong>DOM基本操作</strong>
        <strong>DOM基本操作</strong>
        <p>我是p标签</p>
    </div>
<!--    <input type="text" name="" value="表单中的文本框内容">-->
    <input type="radio" name="" value="男" id="男">男
    <input type="radio" name="" value="女" id="女">女
    <input type="checkbox" value="小孩" id="小孩">小孩
</body>
</html>